﻿<%@ page import="java.util.*"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<%
String realPath = request.getScheme() + "://"  
        + request.getServerName() + ":" + request.getServerPort()  
        + request.getContextPath() + "/";   %>
<head>
   <%@ include file="/base/jsp/common/CommonListTop.jsp"%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>南网图讯-首页</title>
    <link type="text/css" href="${ctx}/zenithsun/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="${ctx}/zenithsun/news/pc/css/basic.css" rel="stylesheet">
    <link type="text/css" href="${ctx}/zenithsun/news/pc/css/index.css?0909" rel="stylesheet">
    <%-- <script type="text/javascript" src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script> --%>
    <script type="text/javascript" src="${ctx}/zenithsun/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<!--头部-->
<div class="mod-top">
    <div class="mod-grid clearfix">
        <div class="mod-left fn-fl">
        	<div class="mod-logo fn-fl"><img src="${ctx}/zenithsun/news/pc/images/login-logo.png" alt=""/></div>
            <div class="mod-search fn-fr">
                <form class="mod-search-grid" method="" action="">
                    <input type="text" class="search-Txt" value="" placeholder="标题，副标题，关键字，摘要，来源"/>
                    <button type="button" class="search-Btn"><!-- <i class="fa fa-search"></i> --></button>
                </form>
            </div>
        </div>
        <div class="mod-right fn-fl ml20">
            <div class="mod-downPop-grid fn-fl fn-pr">
                <a href="javascript:void(0);" class="i-downBtn ml20 i-phone">手机客户端下载</a>
                <div class="mod-downPop">
                    <span class="caret"></span>
                    <div class="mod-downCode"><img src="${ctx}/zenithsun/app/appQRCode.png"><p>iPhone & Android</p> </div>
                </div>
            </div>
        </div>
        <h1 class="mod-logo fn-fr mt15" title="南网图讯-图片新闻"><a href="${ctx}/path/newsinfo/index" title="南网图讯-图片新闻"><img src="${ctx}/zenithsun/news/pc/images/main_logo.png" alt="南网图讯"/></a></h1>
    </div>
</div>
<!--banner模块-->
<div class="mod-newsBan mb20">
    <div class="photoCarousel" id="photoCarousel_bottomRoll">
        <ul id="carousel-news">
            <c:forEach items="${carouselNews }" var="carousels" varStatus="status">
            	<li id="id${status.index + 1 }">
	                <a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${carousels.id}" target="_blank"><img src="${ctx}${carousels.cover_path}" alt="" /></a>
	                <h3><a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${carousels.id}" target="_blank">${carousels.title}</a></h3>
	                <p>${carousels.diff_time}</p>
            	</li>
            </c:forEach>
        </ul>
        <div class="mod-grid j-newsDesc fn-pr">
            <div class="mod-newsDesc">
                <div class="mod-newsDescSpan">
                    <div class="mod-newsDescSpan-hd">精选</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--头条新闻模块-->
<div class="top-news mb10">
    <div class="mod-grid">
        <dl class="topNews-dl j-topNews clearfix" id="top-news">
            <dt><em>头条新闻</em></dt>
			<c:forEach items="${topNews }" var="tops" varStatus="status">
				<dd <c:if test="${status.index == 0}"> class="current"</c:if>>
	                <div class="topNews-timer fn-pr">
	                    <em class="timer-day">${tops.day_ }</em>
	                        <em class="timer-line">/</em>
	                        <em class="timer-month">${tops.month_ }月</em>
	                </div>
	                <div class="topNews-tps" <c:if test="${status.index == 0}"> style="width: 300px;"</c:if>>
	                    <a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${tops.id}" target="_blank">
	                        <h3 class="fn-wto">${tops.title }</h3>
	                        <p>${tops.nabstract }</p>
	                    </a>
	                </div>
	            </dd>
			</c:forEach>
        </dl>
    </div>
</div>
<!--内容模块-->
<div class="mainContent">
    <div class="mod-grid">
        <!--主体内容头部-->
        <div class="mc-header pt10 mb5">
            <ul class="mc-header-ul clearfix" id="top-news">
                <c:forEach items="${newsColumns }" var="columns" varStatus="status">
                	<li><a href="${ctx}/path/newsinfo/index?columnId=${columns.id }#onCurrent"<c:if test="${columnId eq columns.id }"> class="current" name="onCurrent"</c:if> >${columns.name }</a></li>
                </c:forEach>
            </ul>
        </div>
        <!--主体内容-->
        <div class="mc-body clearfix">
            <!--主体内容左边-->
            <div class="mod-left fn-fl">
                <div class="mc-body-hd mb5 clearfix">
                    <!-- <h3 class="mc-hd-txt fn-fl">新闻展示</h3> -->
                    <div class="mc-hd-list fn-fl">
                    	<span class="fts14 fn-fl">切换视图：</span>
                        <a href="javascript:void(0);" class="mc-TextListBtn j-imgListItem-list" title="列表模式"></a><!--为列表模式-->
                        <a href="javascript:void(0);" class="mc-ImgListBtn j-imgListItem-float current" title="模块模式"></a><!--为区块模式-->
                    </div>
                    <a href="javascript:void(0);" onclick="browseMore()" class="fn-fr mc-TextListBtn-more">更 多<em>&gt;&gt;</em></a>
                </div>
                <div class="mc-body-bd">
                    <ul class="mod-ListImg j-imgList mod-ListFloat clearfix" id="column-news"><!--mod-ListFloat 为区块模式--><!--mod-ListMenu 为列表模式-->
						<c:forEach var="news" items="${newsByColumn }" varStatus="status">
                        	<li data-key="t">
	                            <div class="mod-ListImg-pic">
	                                <a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${news.id}" title="${news.title}"  target="_blank"><img src="${ctx}${news.cover_path}" alt="${news.title}" /></a>
	                            </div>
	                            <div class="mod-ListImg-hd">
	                                <h3 title="${news.title}"><a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${news.id}" title="${news.title}" target="_blank">${news.title}</a></h3>
	                                <div class="mod-ListImg-orgin">编辑<em>：</em>${news.editor}<em>/</em>摄影<em>：</em>${news.photographer}</div>
	                            </div>
	                            <div class="mod-ListImg-info">
	                            	<div class="mod-ListImg-infoGrid">
		                                <p class="mod-ListImg-dersc">${news.nabstract}</p>
		                                <p class="mod-ListImg-tips clearfix">
		                                    <span class="fn-fl" ><i class="glyphicon glyphicon-eye-open"></i> ${news.page_view_counter}</span>
		                                    <span class="fn-fr"><i class="glyphicon glyphicon-time mr5"></i> ${news.publish_time}</span>
		                                </p>
	                           	    </div>
	                            </div>
	                            <a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${news.id}" class="cloneCover fn-dn"></a>
	                        </li>
                        </c:forEach> 
                    </ul>
                    
                </div>
            </div>
            <!--主体内容右边-->
            <div class="mod-right mt20 fn-fr">
                <div class="mod-contentBox mb20">
                    <div class="mod-contentBox-hd clearfix">
                        <h3 class="fn-fl" title="最新专题">最新专题</h3>
                        <a class="mod-BoxMore fn-fr" href="javascript:void(0);" onclick="specialNewsMore()" style="display:none">更多></a>
                    </div>
                    <div class="mod-contentBox-bd pd10">
                        <div class="mod-explist fn-pr">
                            <!-- <a href="#" title="">  -->
                               <img src="${ctx}${specialNews.cover_path}" alt="${specialNews.title}"/>
                               <div class="mod-explist-bd">
                                    <h3 class="fn-wto">${specialNews.title}</h3>
                                    <!-- <p class="fn-wto">保持改革定力，把政策吃透、把问题想透、把措施研究透</p> -->
                                </div>
                          <!--  </a>  -->
                        </div>
                    </div>
                </div>

                <div class="mod-contentBox mb20 j-siderCont">
                    <div class="mod-contentBox-hd clearfix">
                        <h3 class="fn-fl" title="新闻点击排行榜">新闻点击排行榜</h3>
                        <a class="mod-BoxMore fn-fr" href="#" style="display:none">更多></a>
                    </div>
                    <div class="mod-contentBox-bd pd10">
                        <ul class="mod-textList" id="update-tops"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--回到顶部模块-->
<div class="mod-grid fn-pr go-top">
    <a href="javascript:void(0);" title="回到顶部">回到顶部</a>
</div>
<!--底部模块-->
<div class="mod-footer">
    <div class="mod-grid clearfix">
        <div class="mod-left fn-tac fn-fl">
            <p class="mod-footer-item"><a href="#" title="关于南网图片新闻网">关于南网图片新闻网</a>|<a href="#" title="服务协议">服务协议</a>|<a href="#" title="隐私政策">隐私政策</a>|<a href="#" title="图片版权">图片版权</a></p>
            <p><a href="#">南方电网传媒有限公司</a> 版权所有　Copyright © 2015 www.csgpic.cn. All rights reserved <a href="#">粤ICP备16079034号</a> </p>
            <p>地址：广东省广州市越秀区东风东路846号　邮编：510600　联系电话：(86－020)38122925　传真：(86－020)38122993/38122992</p>
        </div>
        <div class="mod-right fn-fr">
            <a href="#" class="mod-codeBox">
                <h4>南网图片新闻客户端</h4>
                <img src="${ctx}/zenithsun/app/appQRCode.png" alt=""/>
            </a>
        </div>
    </div>
</div>



<script type="text/javascript" src="${ctx}/zenithsun/news/pc/js/ui.js"></script>
<script type="text/javascript" src="${ctx}/zenithsun/news/pc/js/news.js"></script>
<script>
    $(function () {
        $('#photoCarousel_bottomRoll').IndexCarousel_c({
            switchover: 'bottomRoll',
            time:3000
        });
        //二维码鼠标事件
        $(".mod-downPop-grid").hover(
            function(){
                $(".mod-downPop").stop().animate({height:"150px"}).show();
            },
            function(){
                $(".mod-downPop").stop().animate({height:"0px"}).hide();
            }
        );
        //新闻类型标题点击事件
        $(".mc-header-ul li a").on('click',function(){
            $(".mc-header-ul li a").removeClass("current");
            $(this).addClass("current");
        });
        //为列表模式点击事件
        $(".j-imgListItem-list").on('click',function(){
            $(this).siblings().removeClass("current");
            $(this).addClass("current");
            $(".j-imgList").find("li").attr("data-key","f");
            $(".j-imgList").find(".mod-ListImg-dersc").removeAttr("style");
            $(".j-imgList").removeClass("mod-ListFloat").addClass("mod-ListMenu");
            $(".mod-ListMenu li").hover(function(){
            	var $ShowHtml = $(this).find(".mod-ListImg-dersc").html();
            	var This =$(this);
            	if($ShowHtml!=""){
            		This.find(".mod-ListImg-dersc").stop().animate({height:"50px"});
            	}	
            },function(){
            	$(this).find(".mod-ListImg-dersc").stop().animate({height:"0"});
            });
           
        });
        //为区块模式点击事件
        $(".j-imgListItem-float").on('click',function(){
            $(this).siblings().removeClass("current");
            $(this).addClass("current");
            $(".j-imgList").find("li").attr("data-key","t");
            $(".j-imgList").removeClass("mod-ListMenu").addClass("mod-ListFloat");
        });
        //搜索功能
        $(".search-Btn").on('click',function(){
        	var keyWord = encodeURI(encodeURI($(".search-Txt").val()));
        	var url = "${ctx}/path/newsinfo/search?value=" + keyWord;
        	window.open(url);
        });
        
        //搜索输入框事件
        $(".search-Txt").focus(function(){
        	$(this).parents(".mod-search").addClass("mod-search-hover");
        });
        $(".search-Txt").blur(function(){
        	$(this).parents(".mod-search").removeClass("mod-search-hover");
        });
        $(".mod-search-grid").keydown(function(event){
       	  if(event.keyCode ==13){
       		$(".search-Btn").trigger("click");
       	  }
       	});
        //定位
        var Top = $(".j-siderCont").position().top;
        var left = $(".j-siderCont").position().left;
        var wid = $(".j-siderCont").width();
        $(window).scroll(function(){
        	var sh=$(this).scrollTop();
        	if(sh>=Top){
        		$(".j-siderCont").addClass("scrTop").css({"left":left,"top":"0","width":wid});
        	}else{
        		$(".j-siderCont").removeClass("scrTop").removeAttr("style");
        	}
        });
                
    });
    
    //浏览更多点击事件
    function browseMore(){
		//跳转
		var url = '${ctx}'+ "/path/newsinfo/channel?columnid=" + '${columnId}';
    	//window.open(url);
		 window.location.href = url;
    }
    
    //浏览更多专题新闻
    function specialNewsMore(){
    //跳转
    var url='${ctx}'+"/path/newsinfo/specialNews";
    window.location.href = url;
    }
</script>
</body>
</html>